<template>
  <div class="ul_timeline" v-loading="loading" element-loading-text="加载中...">
    <el-empty description="暂无备注" v-if="total == 0" />
    <el-timeline v-else class="first_pane">
      <el-timeline-item
        class="box-card"
        color="#007cff"
        v-for="(activity, index) in activeList"
        :key="index"
        :timestamp="activity.createTime"
        placement="top"
      >
        <el-card>
          <div class="c_network back_c4"> {{ activity.createEmp }}</div>
          <div class="c_note">{{ activity.content }}</div>
          <div>
            <el-image
              v-for="(img, index) in activity.annexs"
              :key="index"
              style="width: 40px; height: 40px; margin: 0 5px 5px 0"
              :src="img"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="activity.annexs"
              :initial-index="index"
              fit="cover"
            />
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
  <el-pagination
    class="page_bo"
    hide-on-single-page
    :small="true"
    @current-change="getList"
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    layout="total, prev, pager, next"
  />
  <div class="upload_img">
    <el-upload
      :auto-upload="false"
      list-type="picture-card"
      :on-preview="lookFile"
      accept="image/*,.pdf"
      drag
      action="#"
      multiple
      :on-change="handleChange"
      :limit="5"
      v-model:file-list="fileList"
    >
      <el-icon size="16">
        <Plus />
      </el-icon>
    </el-upload>
  </div>
  <footer class="f_content">
    <div class="send_cont">
      <el-input
        placeholder="发送备注"
        v-model="dataObj.remark"
        :autosize="{ minRows: 4, maxRows: 4 }"
        type="textarea"
        autofocus
        maxlength="50"
        show-word-limit
        contenteditable="true"
      >
      </el-input>
      <div class="upload_send">
        <el-button class="btn btn-bg btn_send" :disabled="!dataObj.remark" @click="sendMessage">
          发送
        </el-button>
      </div>
    </div>
  </footer>
  <!-- 文件查看 -->
  <el-dialog title="查看图片" v-model="dialogContract">
    <img w-full style="width: 100%; height: 100%" :src="file" />
  </el-dialog>
</template>
<script lang="ts" setup>
  import { ref, onMounted, toRefs, nextTick } from 'vue'
  import { ElMessage } from 'element-plus'
  import { getRemarkList, saveRemark } from '../../../../../api/order'
  import { orderAnnexUpload } from '../../../../../api/upload'
  import type { UploadFile, UploadProps } from 'element-plus'
  const props = defineProps({
    workId: [String, Array],
  })
  const color = ['#007cff', '#a06eff', '#00c0c0', '#e69103']
  const colorBg = ['back_c4', 'back_c3', 'back_c2', 'back_c1']
  const { workId } = toRefs(props)
  const activeList = ref(null) // 备注数据列表
  const total = ref(0)
  let pageSize = ref(10)
  let currentPage = ref(1)
  let loading = ref(false)
  const fileList = ref([])
  const dialogContract = ref(false)
  const file = ref()
  // 查看图片
  const lookFile = (val) => {
    file.value = val.url || val
    dialogContract.value = true
  }
  const handleChange: UploadProps['onChange'] = (uploadFile: UploadFile, uploadFiles) => {
    fileList.value = uploadFiles
  }
  const dataObj = ref({
    remark: '',
    workIds: [],
    annexs: [],
  })
  onMounted(() => {
    getList(1)
  })
  defineExpose({ getList })
  async function getList(page = 1) {
    currentPage.value = page
    let data = {
      limit: pageSize.value,
      page: page,
    }
    loading.value = true
    await getRemarkList(data, workId.value).then((res) => {
      if (res.data.success) {
        activeList.value = res.data.data.rows
        total.value = Number(res.data.data.total)
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 4000,
        })
      }
      loading.value = false
    })
  }
  const sendMessage = async () => {
    loading.value = true
    dataObj.value.annexs = []
    if (fileList.value?.length > 0) {
      let imageList = []
      imageList = fileList.value.map((o) => {
        return o.raw
      })

      await orderAnnexUpload(imageList).then((res) => {
        if (res.data.success) {
          dataObj.value.annexs = res.data.data.rows
        } else {
          ElMessage({
            message: res.data.message,
            type: 'error',
          })
          return
        }
      })
    }
    dataObj.value.workIds = [workId.value]
    await saveRemark(dataObj.value).then((res) => {
      ElMessage({
        showClose: true,
        message: res.data.message,
        type: res.data.success ? 'success' : 'error',
        offset: 200,
      })
      if (res?.data.success) {
        fileList.value = []
        dataObj.value.remark = ''
        dataObj.value.annexs = []
        getList(1)
      }
    })
    loading.value = false
  }
</script>
<style lang="scss" scoped>
  .ul_timeline {
    flex: 1;

    position: relative;
    overflow: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    &::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .first_pane {
      position: absolute;
      padding: 0;
      padding-right: 4px;
      width: 100%;
      box-sizing: border-box;
    }
  }

  .page_bo {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    color: #999;
    font-size: 12px;
  }

  :deep(.el-tabs__item.is-active) {
    color: #007cff !important;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
  }

  :deep(.el-tabs__nav .el-tabs__active-bar) {
    background-color: #007cff;
    padding: 0 10px;
    position: absolute;
    bottom: 0;
    left: -10px;
  }

  :deep(.el-tabs__nav .el-tabs__item:hover) {
    color: #007cff;
  }

  :deep(.el-card__header) {
    // padding: 10px 0;
    padding: 0;
    // margin: 0 10px;
    border: none;
  }

  :deep(.el-card__body) {
    padding: 0 10px;
    font-size: 12px;
  }

  :deep(.el-card) {
    &.is-always-shadow {
      box-shadow: 0px 0px 1px 2px rgba(185, 185, 185, 0.12);
    }

    border: none;
    border-radius: 0;
  }

  .box-card {
    padding-bottom: 20px;

    .c_network {
      padding: 4px 5px;
      display: inline-block;
      margin: 8px 0;
      font-size: 12px;
    }

    .back_c1 {
      // background-color: #f5eee3;
      color: #e69103;
    }

    .back_c2 {
      // background-color: #d2f7f7;
      color: #00c0c0;
    }

    .back_c3 {
      // background-color: #eee9fa;
      color: #a06eff;
    }

    .back_c4 {
      // background-color: #e4eef8;
      color: #007cff;
    }

    .c_note {
      margin-bottom: 8px;
    }

    :deep(.el-timeline-item__node--normal) {
      left: 0;
    }

    :deep(.el-timeline-item__tail) {
      left: 5px;
    }

    :deep(.el-timeline-item__wrapper) {
      padding-left: 20px;
      top: -5px;
    }
  }

  .upload_img {
    width: 100%;
    margin-bottom: 6px;

    :deep(.el-upload-list--picture-card) {
      display: flex;
      flex-wrap: wrap;
      // flex-direction: row-reverse;
      justify-content: left;

      .el-upload {
        width: 50px;
        height: 50px;
        margin: 8px 0 0 8px;
      }

      .el-upload-list__item {
        width: 50px;
        height: 50px;
        margin: 8px 0 0 8px;

        .el-upload-list__item-actions {
          font-size: 16px;

          &:hover {
            display: flex;
            justify-content: space-around;
            align-items: center;
          }
        }
      }
    }

    :deep(.el-upload-dragger) {
      padding: 0;
      height: 100%;
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .f_content {
    width: 100%;
    box-sizing: border-box;

    .send_cont {
      background-color: #fff;
      border: 1px solid #eee;
      .upload_send {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 8px;

        .btn_send {
          margin: 6px 0;
        }
      }

      :deep(.el-textarea__inner) {
        box-shadow: none;
        background-color: #fff;
      }
    }
  }
</style>
